<script setup lang="ts">
import { ref, reactive,defineExpose } from 'vue'
import type { FormRules, FormInstance } from 'element-plus'
import { Lock, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const { push } = useRouter()
import { Login } from '@/api/index'
import { useMessage } from '@/hooks/useMessage'
import CryptoJS from 'crypto-js'

const message = useMessage()

const dialogTableVisible = ref(false)
const form = ref({
  UserID: '',
  UserPW: ''
})

interface RuleForm {
  UserID: string
  UserPW: string
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
  UserID: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  UserPW: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const pwRef = ref()
const focusPwRef = () => {
  pwRef.value.focus()
}

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // 使用MD5算法对密码进行加密
      const encrypted = CryptoJS.MD5(form.value.UserPW).toString()
      // const encrypted2 = CryptoJS.MD5('AH-API-Showboard').toString()
      const res = (await Login({
        inputStr: `OperType=Login;$;UserID=${form.value.UserID};$;UserPW=${encrypted}`
      })) as any
      if (res.code !== 200) {
        message.error(res.msg)
        emit('update-value', true)

      } else {
        localStorage.setItem('GREAT_WALL_USER', JSON.stringify(form.value.UserID))
        message.success(res.msg)
        emit('update-value', false)
      }

      dialogTableVisible.value = false
    }
  })
}

const emit = defineEmits(['update-value'])
defineExpose({open:()=>{dialogTableVisible.value=true}})
</script>

<template>
  <el-dialog class="custom-dialog" v-model="dialogTableVisible" title="" width="480px" :style="{ backgroundColor: '#182758' }"  top="15%" center>
    <div class="">
      <div class="login-main-box">
        <div class="login-right-box">
          <!-- <img class="logo" src="@/assets/logo.png"/> -->
          <h4>登录</h4>
          <el-form
            ref="ruleFormRef"
            :model="form"
            :rules="rules"
            label-width="auto"
            style="max-width: 600px; margin: 20px 0"
            @submit.prevent
          >
            <el-form-item label="账号" prop="UserID">
              <el-input
                size="large"
                :prefix-icon="User"
                placeholder="请输入账号"
                v-model="form.UserID"
                tabindex="2"
                @keyup.enter.prevent="focusPwRef"
              />
            </el-form-item>
            <el-form-item label="密码" prop="UserPW">
              <el-input
                ref="pwRef"
                size="large"
                type="password"
                :prefix-icon="Lock"
                placeholder="请输入密码"
                v-model="form.UserPW"
                show-password
                tabindex="3"
                @keyup.enter.prevent="onSubmit(ruleFormRef)"
              />
            </el-form-item>
          </el-form>
          <el-button
            size="large"
            type="primary"
            style="width: 84%"
            round
            class="ml-12"
            @click="onSubmit(ruleFormRef)"
          >登 录</el-button
          >
        </div>
      </div>
    </div>

  </el-dialog>
</template>

<style lang="less" scoped>
.login-main-box {
  display: flex;
  align-items: center;
  margin-left: 60px;
  height: 250px;
  background:#182758;
  border-radius: 10px;
}
.login-img-box {
  width: 50%;
  margin: 0;
}
.login-right-box h4 {
  padding-left: 60px;
  //   background: url('/public/logo.jpg') no-repeat left center;
  background-size: contain;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 12px;
  color: #00F2F1;
  text-align: center;
}
:deep(.el-form-item) {
  align-items: center;
}
.logo{
  position: absolute;
  top: 20px;
  left: 30px;
  width: 150px;
}
:deep(.el-form-item__label){
  color: #fff;
}
</style>
